import React, { memo, useEffect, useState } from "react";
import { getBasics } from "@common/envOverviewApi/doc";
import { Card, Descriptions, Empty, message } from "antd";
import { BasicMesInitialState } from "@model";
import "./style.less";

type Props = {
  nodeName: string;
};

/**
 * @func 基础信息页面组件
 * @param props
 * @returns React.FC
 */
const BasicMes: React.FC<Props> = (props) => {

  const [data, setData] = useState(BasicMesInitialState);

  const { nodeName } = props;

  useEffect(() => {
    getBasicsMes();
  }, []);

  const getBasicsMes = async () => {
    try {
      const json = await getBasics(nodeName);
      if (json.found) {
        setData(json);
      } else {
        message.warning("该机器下未找到基础信息！");
      }
    } catch (err) {

    }
  };

  return (
    <div className="basic-mes-wrapper">
      {data.found ? (
        <>
          <Card style={{ width: "70%", margin: "3% 0" }}>
            <Descriptions column={1}>
              <Descriptions.Item label="SN">
                {data._seq_no}
              </Descriptions.Item>
              <Descriptions.Item label="名称">
                {data._id}
              </Descriptions.Item>
              <Descriptions.Item label="采集时间">
                {data._index}
              </Descriptions.Item>
            </Descriptions>
          </Card>
          {data._source.basic && (
            <Card style={{ width: "70%", margin: "3% 0" }}>
              <Descriptions column={1}>
                {Object.keys(data._source.basic).map((item, index) => (
                  <Descriptions.Item key={index} label={item.toUpperCase()}>
                    {(data._source.basic as { [key: string]: string })[item]}
                  </Descriptions.Item>
                ))}
              </Descriptions>
            </Card>
          )}
        </>
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      )}
    </div>
  );
};

export default memo(BasicMes);
